import React, { useEffect, useState } from 'react'
import './home.scss'
import IndexCom from '../../components/index/IndexCom'
import { Swiper } from 'antd-mobile'
import { CaretDownOutlined, SearchOutlined, CompassOutlined } from '@ant-design/icons'
import Searchbox from '../../components/searchBox/Searchbox'
import axios from 'axios'
type Props = {
  history: any
}

export default function Home(props: Props) {

  let url:string = 'http://localhost:8080'


  useEffect(() => {
    getSwiper()
    getGroups()
    getNews()
  }, [])

  // 当前城市

  const currentCity = JSON.parse(window.sessionStorage.getItem('currentCity') || JSON.stringify({label:"广州",value:"AREA|e4940177-c04c-383d",pinyin:"guangzhou", short:"gz"}))



  // 轮播图 

  const [imgSrcList, setimgSrc] = useState<any>([]) 

  
  const getSwiper = async () => {
    let {data:{body:data}} = await axios.get( url + '/home/swiper' )
    setimgSrc(data)
  }

  // 导航栏

  const navList:any[] = [
    {
      imgsrc:"",
      title:"整租",
      path:"/lookinghome"
    },
    {
      imgsrc:"",
      title:"合租",
      path:'/lookinghome'
    },
    {
      imgsrc:"",
      title:"地图找房",
      path:'/map'
    },
    {
      imgsrc:"",
      title:"出去组",
      path:'',
    }
  ]

  const urlChange = (key:string) => {
    if(key){
      props.history.push({pathname:key})
      window.sessionStorage.setItem('currentNav', '1')
    }
  }


  // 租房小组

  const [grouplist, setgrouplist] = useState<any>([])


  const getGroups = async () => {
    let {data:{body:data}} = await axios.get( url + '/home/groups?area='+currentCity.value )
    // console.log(data);
    setgrouplist(data)
    
  }

  // 最新资讯

  const [newsList, setNewsList] = useState<any>([])


  const getNews = async () => {
    let {data:{body:data}} = await axios.get( url + '/home/news?area='+currentCity.value )
    // console.log(data);
    setNewsList(data)
  }

  return (
    <div className="home">
      <div className="content">
        {/* 轮播图 */}
        <div className='loopTu'>
          <Swiper loop autoplay>
            {
              imgSrcList.map((item:any) => (
                <Swiper.Item key={item.id}>
                  <div 
                  style={{ 
                    background: `url(${url + item.imgSrc}) center center no-repeat`,
                    height:"2.12rem",
                    backgroundSize:"cover"
                    }}>
                  </div>
                </Swiper.Item>))
            }
          </Swiper>
          {/* 搜索框 */}
          <Searchbox history={props.history}>
            {
              (goPush:any) =>(
                <div className='search'>
                  <div className='searchItem'>
                    <div className='selector' onClick={()=>goPush('/citylist','/home')}>
                      <span>{ currentCity.label }</span>
                      <CaretDownOutlined />
                    </div>
                    <div className='icon'>|</div>
                    <div className='searchor' onClick={()=>goPush('/search')}>
                    <SearchOutlined />
                    <span>请输入小区或地址</span>
                    </div>
                  </div>
                  <div className='map'>
                    <CompassOutlined style={{ color:"#eee" }} onClick={()=>goPush('/map')}/>
                  </div>
                </div>
              )
            }
          </Searchbox>
        </div>
        {/* 导航栏 */}
        <div className="nav">
            {
              navList.map((item:any) => (
                <div className='item' key={item.title} onClick={()=>urlChange(item.path)}>
                  <div className='img'>
                    <img src={item.imgsrc} alt="" />
                  </div>
                  <div className='text'>{ item.title }</div>
                </div>
              ))
            }
        </div>
        {/* 租房小组 */}
        <div className='lookhousegroup'>
            <div className='title'>
              <div className='tleft'>
                租房小组
              </div>
              <div className='tright'>
                更多
              </div>
            </div>
            <div className='groupContent'>
              {
                grouplist.map((item:any, index:number) =>(
                  <div className='item' key={index}>
                    <div>
                      <div className='iTitle'>
                        <div className='ttitle'>{ item.title }</div>
                        <div className='desc'>{ item.desc }</div>
                      </div>
                      <div className='iContent'>
                        <img src={url + item.imgSrc } alt="" />
                      </div>
                    </div>
                  </div>
                ))
              }
            </div>
        </div>
        {/* 最新资讯 */}
        <div className='news'>
              <div className="newsTitle">
                最新资讯
              </div>
              <div className='newsContent'>
                {
                  newsList.map((item:any, index:number) =>(
                    <div className='newsItem' key={index}>
                      <div className='newsimg'>
                        <img src={url + item.imgSrc} alt="" />
                      </div>
                      <div className='newstext'>
                        <div className='newsSubTitle'>{item.title}</div>
                        <div className='newsFromDate'>
                          <div>{item.from}</div>
                          <div>{item.date}</div>
                        </div>
                      </div>
                    </div>
                  ))
                }
              </div>
        </div>
      </div>
      <IndexCom />
    </div>
  )
}